<template>
  <el-container class="setting-center_mall-shop-setting_shop-initialize">
    <el-main>
      <el-card shadow="never" class="commercia-tenant-list-title tableCard">
        <!-- <el-button class="mb10" type="primary" @click="openDialog('', 0)">添加</el-button> -->
        <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList}" print>
          <template v-slot:buttons>
            <el-button class="mb10" size="small" type="primary" icon="el-icon-plus" @click="openDialog('', 0, false)">添加</el-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="refList"
          border
          stripe
          resizable
          highlight-hover-row
          :auto-resize="true"
          :data="list"
          height="540"
          :print-config="{}"
          header-align="center"
        >
          <vxe-table-column type="seq" title=" " width="50" />
          <vxe-table-column field="name" title="员工角色" width="180" />
          <vxe-table-column field="remark" title="备注" min-width="300">
            <template slot-scope="scope">
              <p class="overflow1" :title="scope.row.remark">{{ scope.row.remark }}</p>
            </template>
          </vxe-table-column>
          <vxe-table-column width="60" title="状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.publishStatus" :inactive-value="0" :active-value="1" active-text inactive-text @change="changeStates(scope)" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" fixed="right" width="170" align="center" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="openDialog(scope.row.id, 2, true)">查看</el-button>
              <el-button v-if="scope.row.publishStatus == 0" type="text" size="mini" @click="openDialog(scope.row.id, 1, false)">编辑</el-button>
              <el-button v-if="scope.row.publishStatus == 0" type="text" size="mini" @click="delRole(scope.row.id)">删除</el-button>
              <el-button type="text" size="mini" @click="getMenu(scope.row.id)">权限</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-card>
    </el-main>
    <el-dialog v-if="roleDialog" width="30%" :title="title" :close-on-click-modal="false" :visible.sync="roleDialog" append-to-body>
      <el-form ref="roleForm" :model="roleParams" :disabled="title == '查看'" label-position="right" :rules="roleRules" label-width="6rem">
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="角色编码" prop="code">
              <el-input v-model="roleParams.code" :disabled="title == '编辑'" />
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="角色名称" prop="name">
              <el-input v-model="roleParams.name" :disbled="diabledEdit" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" prop="sort" class="flex-just">
              <el-input-number v-model="roleParams.sort" :disabled="diabledEdit" :max="100" :min="1" :precision="0" :controls="!diabledEdit" controls-position="right" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="roleParams.remark" type="textarea" rows="3" :disbled="diabledEdit" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleDialog = false">取 消</el-button>
        <el-button v-if="title != '查看'" type="primary" @click="sureRoleClick">确 定</el-button>
      </div>
    </el-dialog>
    <ByMenu :id="byMenuId" ref="byMenuDialog" />
  </el-container>
</template>

<script>
import ByMenu from './components/byMenu'
import { getStoreRoleList, addStoreRole, editStoreRole, searchStoreRole, changeStoreRoleState, delStoreRole } from '@/api/store'

export default {
  components: {
    ByMenu
  },
  data() {
    return {
      list: [],
      title: '',
      roleParams: {},
      roleRules: {
        // code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
      },
      byMenuId: '',
      diabledEdit: false,
      roleDialog: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getMenu(id) {
      this.byMenuId = id
      this.$refs.byMenuDialog.dialog = true
    },
    changeStates(scope) {
      this.list[scope.seq - 1].publishStatus = scope.row.publishStatus === 1 ? 0 : 1
      changeStoreRoleState({ id: scope.row.id, status: scope.row.publishStatus === 1 ? 0 : 1 }).then(res => {
        this.list[scope.seq - 1].publishStatus = scope.row.publishStatus === 1 ? 0 : 1
      })
    },
    delRole(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delStoreRole({ id }).then(res => {
          this.$message.success('删除成功！')
          this.getList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    getList() {
      getStoreRoleList({ module: 'shop', pageNum: 1, pageSize: 9999 }).then(res => {
        this.list = res.records
      })
    },
    openDialog(id, type, bool) {
      this.diabledEdit = bool
      this.roleParams = {
        module: 'shop'
      }
      this.roleParams.id = id
      if (type === 0) {
        this.title = '添加'
      } else if (type === 1) {
        this.title = '编辑'
      } else {
        this.title = '查看'
      }
      if (type !== 0) {
        searchStoreRole({ id }).then(res => {
          this.roleParams = res
          this.roleDialog = true
        })
      } else {
        this.roleDialog = true
      }
    },
    sureRoleClick() {
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          if (this.title === '添加') {
            addStoreRole(this.roleParams).then(res => {
              this.getList()
              this.$message.success('添加成功！')
              this.roleDialog = false
            })
          } else {
            editStoreRole(this.roleParams).then(res => {
              this.getList()
              this.$message.success('编辑成功！')
              this.roleDialog = false
            })
          }
        }
      })
    }
  }
}
</script>

<style>

</style>
